<template>
  <div class="header">
    <div style="width: 203px;"></div>
    <!-- <el-button type="success" :icon="Bell">24年录取数据陆续整理上传中，预计6月份更新完成</el-button> -->
     <div></div>
    <el-select v-model="type" size="large" @change="typeChange">
      <el-option label="今年分布(预测)" value="1"></el-option>
      <el-option label="往年分布" value="0"></el-option>
    </el-select>
  </div>
  <div class="student-analysis mohu">
    <div
      v-loading="loading"
      element-loading-text="数据加载中..."
      class="charts-one charts"
    ></div>
    <div
      v-loading="loading"
      element-loading-text="数据加载中..."
      class="charts-two charts"
    ></div>
    <div
      v-loading="loading"
      element-loading-text="数据加载中..."
      class="charts-three charts"
    ></div>
    <div v-if="isUnlock" class="mohu-filter">
      <el-button type="success" @click="onUnlock">
        <el-icon class="el-icon--right"><Key /></el-icon> <span>解锁</span>
      </el-button>
    </div>
  </div>
</template>
<script setup>
import {
  Bell,
} from "@element-plus/icons-vue";
import { onMounted, ref, watch, defineProps, toRef } from "vue";
import * as Echarts from "echarts";
import { studentAnalysis, volunteerCount } from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage } from "element-plus";
const emit = defineEmits(["onChange"]);
import { useStore } from "vuex";
const store = useStore();
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getStudentAnalysis();
  // getVolunteerCount();
}
// 点击解锁
function onUnlock() {
  emit("onChange", { isUnlock: true });
}
const loading = ref(false);
const props = defineProps({
  majorId: String,
});
// 当年,历年分布
const type = ref("1");
// 图表数据
const chartData = ref([]);
onMounted(() => {
  getStudentAnalysis();
  // getVolunteerCount();
});
// 是否显示模糊效果
const isUnlock = ref(false);
const count = ref(0);
// 今年新增多少人将该学校专业加入志愿
async function getVolunteerCount() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await volunteerCount(data);
    const res = JSON.parse(decrypt(result));
    console.log(res,'count');
    if (res.status === 0 && res.result) {
      count.value = res.result == null ? 0 : res.result;
    }
  } catch (error) {
    // throw new Error(error)
  }
}
// 获取考生分析数据
async function getStudentAnalysis() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await studentAnalysis(data);
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if (res.status == 666) {
			ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      let obj = [
        {
          name: "考生生源专业",
          data: [
            {
              name: "今年分布(预测)",
              data: [
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
              ],
            },
						{
              name: "往年分布",
              data: [
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
              ],
            },
          ],
        },
				{
          name: "考生生源层次",
          data: [
            {
              name: "今年分布(预测)",
              data: [
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
              ],
            },
						{
              name: "往年分布",
              data: [
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
              ],
            },
          ],
        },
				{
          name: "考生生源一、二战比例",
          data: [
            {
              name: "今年分布(预测)",
              data: [
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
              ],
            },
						{
              name: "往年分布",
              data: [
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
                {
                  num: "20",
                  name: "请解锁查看",
                },
              ],
            },
          ],
        },
      ];
      loading.value = false;
      initChartOne(obj[0]);
      initChartTwo(obj[1]);
      initChartThree(obj[2]);
    }
    if (res.status === 0 && res.result) {
      chartData.value = res.result;
      initChartOne(res.result[0]);
      initChartTwo(res.result[1]);
      initChartThree(res.result[2]);
      loading.value = false;
			isUnlock.value = false;
    }
    loading.value = false;
  } catch (error) {
    loading.vlaue = false;
    // throw new Error(error)
  }
}

// 改变查看类型
function typeChange() {
  if (chartData.value.length > 0) {
    initChartOne(chartData.value[0]);
    initChartTwo(chartData.value[1]);
    initChartThree(chartData.value[2]);
  }
}

// 初始化图标
function initChartOne(obj) {
  const findObj =
    type.value == "1"
      ? obj.data.find((ele) => ele.name === "今年分布(预测)")
      : obj.data.find((ele) => ele.name === "往年分布");
  console.log(findObj);
  const last = findObj.data.map((ele) => ele.num);
  console.log(last);
  const xAxis = findObj.data.map((ele) => ele.name);
  console.log(xAxis);
  const myChart = Echarts.init(document.querySelector(".charts-one"));
  myChart.setOption({
    title: {
      text: obj.name,
      subtext: findObj.name,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        let relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            params[i].name +
            " : " +
            params[i].value +
            "%";
        }
        return relVal;
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xAxis,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0, // 强制显示所有标签
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: obj.name,
        type: "bar",
        barWidth: "50%",
        data: last,
      },
    ],
  });
}

function initChartTwo(obj) {
  const myChart = Echarts.init(document.querySelector(".charts-two"));
  const findObj =
    type.value == "1"
      ? obj.data.find((ele) => ele.name === "今年分布(预测)")
      : obj.data.find((ele) => ele.name === "往年分布");
  const last = findObj.data.map((ele) => ele.num);
  const xAxis = findObj.data.map((ele) => ele.name);
  myChart.setOption({
    title: {
      text: obj.name,
      subtext: findObj.name,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        let relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            params[i].name +
            " : " +
            params[i].value +
            "%";
        }
        return relVal;
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xAxis,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0, // 强制显示所有标签
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: obj.name,
        type: "bar",
        barWidth: "50%",
        data: last,
      },
    ],
  });
}

function initChartThree(obj) {
  const myChart = Echarts.init(document.querySelector(".charts-three"));
  const findObj =
    type.value == "1"
      ? obj.data.find((ele) => ele.name === "今年分布(预测)")
      : obj.data.find((ele) => ele.name === "往年分布");
  const last = findObj.data.map((ele) => ele.num);
  const xAxis = findObj.data.map((ele) => ele.name);
  myChart.setOption({
    title: {
      text: obj.name,
      subtext: findObj.name,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        let relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            params[i].name +
            " : " +
            params[i].value +
            "%";
        }
        return relVal;
      },
    },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xAxis,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0, // 强制显示所有标签
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: obj.name,
        type: "bar",
        barWidth: "50%",
        data: last,
      },
    ],
  });
}
</script>
<style lang="less" scoped>
.header {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.student-analysis {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .charts {
    flex: 1;
    margin: 0 auto;
    height: 360px;
  }
}
.mohu {
  position: relative;
  z-index: 9;
}

.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
